<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width: 100%;
            height: 100%;
            background-color: white;
        }
        .box .cen{
            width: 1300px;
            height: 100%;
            margin: 0 auto;
            background-color: rgb(231, 231, 231);
        }
        .box .cen .text{
            width: 1300px;
            height: 200px;
            font-size: 36px;
            text-align: center;
            line-height: 200px;
        }
        .box .cen .CommodityArea{
            width: 100%;
            height: 100%;
        }
        .box .cen .CommodityArea .center-shang{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .box .cen .CommodityArea .kuan{
            width: 250px;
            height: 420px;
            list-style: none;
        }
        .box .cen .CommodityArea .kuan .shang{
            margin: 10px auto;
            width: 250px;
            height: 400px;
            background-color: white;
        }
        .box .cen .CommodityArea .kuan .shang .img{
            width: 250px;
            height: 250px;
            padding: 50px;
        }
        .box .cen .CommodityArea .kuan .shang .shang-text{
            padding: 0 20px;
        }
        .box .cen .CommodityArea .kuan .shang .shang-text p{
            width: 100%;
            height: 80px;
            padding: 10px;
            font-size: 14px;
            line-height: 35px;
            text-overflow:ellipsis; 
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow:hidden;
        }
        .box .cen .CommodityArea .kuan .shang .shang-text .price{
            width: 100%;
            height: 50px;
            line-height: 50px;
            color: rgb(255, 41, 41);
        }
        .box .cen .CommodityArea .kuan .shang .shang-text .price i{
            font-size: 14px;
        }
        .box .cen .CommodityArea .kuan .shang .shang-text .price .price-text{
            font-size: 22px;
        }
        .box .cen .CommodityArea .kuan .shang .shang-text .price .switch{
            font-size: 12px;
            color: black;
        }
        .box .cen .CommodityArea .kuan .shang .shang-text .price .color-text{
            padding: 0 10px;
            font-size: 12px;
            text-align: center;
            line-height: 16px;
            border-radius: 15px;
            color: white;
            background-color: red;
        }
        .box .cen .CommodityArea .kuan .shang .shang-text .price .kkkk{
            margin: 17px 5px;
        }
        .MiddleStroke{
            text-decoration:line-through;
        }
        .rigth{
            float: right;
        }
        .none{
            display: none;
        }
        .box .cen .switch{
            display: block;
        }
        .box .cen .btm{
            display: none;
        }
        .box .cen .word{
            width: 100%;
            height: 100px;
            font-size: 30px;
            color: black;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="cen">
            <div class="text">为你推荐</div>
            <div class="CommodityArea">
                <div class="center-shang">
                </div>
            </div>
            <div class="sign switch"><p class="word">正在加载，请等候......</p></div>
        </div>
    </div>
</body>
<script src="./js/data.js"></script>
<script>
    //等待其他代码执行
    window.onload = function () {
        let m = 20;
        //生成DOM节点
        let mander = 0;
        function GenerationNode( tmp = 0 ) {
            console.log('执行成功！！！！！');
            let centerShang = document.querySelector('.center-shang');
            let html = '';
            product.forEach(function (e , i) {
                if ( i < m + tmp ) {
                    html +=`
                            <div class="kuan">
                                <div class="shang">
                                    <div class="img"><img src="${e.img}" alt=""></div>
                                    <div class="shang-text">
                                        <p><span class = "color-text ${e.isSubtag ? '': 'none'}">${e.subtag}</span>&nbsp;${e.title}</p>
                                        <div class="price">
                                            <i>￥</i><span class="price-text ${e.isPlus ? 'MiddleStroke': ''}">${e.price}</span>
                                            <span class = "color-text kkkk rigth">
                                                    会员
                                            </span>
                                            <span class = "switch rigth ${e.isPlus ? '': 'none'}">
                                                ￥${e.plusPrice}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    `;
                    centerShang.innerHTML = html;
                    if (  product.length == i + 1) {
                        console.log('这里已经空了');
                        let sign = document.querySelector('.sign');
                        sign.innerHTML = `<p class="word">加载好了，下面没有数据了！！！！</p>`;
                    }
                }else{
                    return;
                }
            })
            mander += 10;
        }
        //初始化函数
        GenerationNode();
        //判断可视区加载
        let tmp = null;
        window.onscroll=function(){
            let windowH = document.documentElement.clientHeight;//网页可视区域高度
            let documentH= document.documentElement.offsetHeight;
            let scrollH= document.documentElement.scrollTop;
            let html = '';
            if(windowH + scrollH >= documentH){
                clearTimeout(tmp)
                tmp = setTimeout(function () {
                GenerationNode( mander );
                }, 200);
            }else{
                return;
            }
            
        }
    
    
    }
</script>
</html>